<script setup lang="ts">
import { createRadar } from "./index";
import { __LITE_CONFIG__ } from "@/lite.config";

onMounted(() => {
  if (__LITE_CONFIG__.graph) {
    createRadar(110);
  }
});
</script>

<template>
  <div class="graph__packer" v-if="__LITE_CONFIG__.graph">
    <canvas id="graph" width="220" height="220"></canvas>
    <div id="floating"></div>
  </div>
</template>

<style scoped lang="scss">
.graph__packer {
  width: inherit;
  height: 210px;
  display: flex;
  position: relative;
  box-sizing: border-box;
  justify-content: center;

  #graph {
    cursor: pointer;
    position: absolute;
  }

  #floating {
    position: absolute;
    display: none;
    white-space: nowrap;
    z-index: 999;
    transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
    background-color: var(--l-box-bg);
    padding: 10px;
    pointer-events: none;

    border: {
      style: solid;
      width: 0;
      color: rgb(51, 51, 51);
      radius: 10px;
    }
  }
}
</style>
